<template>
  <div class="popularize-check">
    <!-- 数据导出 -->
    <p class="popular-export">
      <el-button @click.stop="onGetExportPopulCheckData">
        导出Excel
        <span style="font-size: 12px">(全部)</span>
      </el-button>
      <iframe ref="populCheckIframe"></iframe>
    </p>

    <!-- 推广标识生成列表 -->
    <div class="popularize-list" v-if="promtDayList && promtDayList.length > 0">
      <!-- table -->
      <el-table :data="promtDayList" style="width: 100%">
        <el-table-column type="index" width="100"></el-table-column>
        <el-table-column prop="click" label="click"></el-table-column>
        <el-table-column prop="pv" label="pv"></el-table-column>
        <el-table-column prop="uv" label="uv"></el-table-column>
        <el-table-column prop="form" label="form"></el-table-column>
        <el-table-column prop="fr" label="fr"></el-table-column>
        <el-table-column prop="fr_zh" label="fr_zh"></el-table-column>
        <el-table-column prop="date" label="日期"></el-table-column>
      </el-table>
    </div>

    <!-- pagination -->
    <p class="popular-pag" v-if="promtDayList && promtDayList.length > 0">
      <el-pagination
        v-if="totalPage"
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :page-count="totalPage"
        :current-page="popuCurPage"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </p>

    <!-- NoData -->
    <NoData v-if="!promtDayList || promtDayList.length <= 0"></NoData>

    <!-- echarts -->
    <BasicBar
      v-if="bIsShow"
      id="0"
      :bIsShow="bIsShow"
      :eData="curBasicBarData"
      :xLabelRotate="true"
      title="点击次数/pv/uv 柱状图"
    ></BasicBar>
    <BasicLine
      v-if="bIsShow"
      id="0"
      :bIsShow="bIsShow"
      :eData="curBasicBarData"
      :xLabelRotate="true"
      title="点击次数/pv/uv 折线图"
    ></BasicLine>
  </div>
</template>

<script lang="ts" setup>
import NoData from "./no-data.vue";
import { useWebUserStore } from "@/store/web/user";
import BasicBar from "@/views/child/admin/echart/echarts-comps/basic-bar.vue";
import BasicLine from "@/views/child/admin/echart/echarts-comps/basic-line.vue";
let pageSize = ref(20);
let popuCurPage = ref(1);
const props = defineProps<{
  site_id: string;
  active: string;
}>();
const site_id = props.site_id;
const populCheckIframe = ref();
const useWebUser = useWebUserStore();

const totalPage = computed(() => {
  return useWebUser.myPopularize.popularDayData.totalPage || 0;
});
const promtDayList = computed(() => {
  return useWebUser.myPopularize.popularDayData.list;
});
const curBasicBarData = computed(() => {
  let _tempEData: any = {};
  _tempEData.xName = "日期";
  _tempEData.yName = "次数";
  _tempEData.xData = [];
  _tempEData.yData = [
    {
      name: "",
      data: [],
    },
    {
      name: "",
      data: [],
    },
    {
      name: "",
      data: [],
    },
  ];

  promtDayList &&
    promtDayList.value.forEach((item) => {
      _tempEData.xData.push({
        value: item.date,
      });
      _tempEData.yData[0].name = "click";
      _tempEData.yData[0].data.push(item.click);
      _tempEData.yData[1].name = "pv";
      _tempEData.yData[1].data.push(item.pv);
      _tempEData.yData[2].name = "uv";
      _tempEData.yData[2].data.push(item.uv);
    });
  return _tempEData;
});

const bIsShow = computed(() => {
  const active = props.active;
  return active === "third";
});

onBeforeMount(() => {
  // post
  useWebUser.getPromtDay({
    site_id: site_id,
    pageSize: pageSize.value,
    page: popuCurPage.value,
  });
});

const handleCurrentChange = (val) => {
  // set popuCurPage
  popuCurPage.value = val;
  // user/getPromtDay
  useWebUser.getPromtDay({
    site_id: site_id,
    pageSize: pageSize.value,
    page: popuCurPage.value,
  });
};

const onGetExportPopulCheckData = () => {
  populCheckIframe.value.src =
    import.meta.env.VITE_APP_API_URL + "/stat/expdatapvuv?site_id=" + site_id;
};
</script>

<style lang="scss" scoped>
.popular-export {
  margin: 20px;
  text-align: right;

  iframe {
    display: none;
  }
}

.popularize-list {
  // padding-bottom: 20px;
  margin: 20px 20px;
  box-shadow: 5px 8px 12px #ebedf0;

  .el-table {
    font-size: 12px;

    .el-table__header {
      tr {
        background-color: #e4e7eb;
      }

      th {
        font-size: 14px;
        background-color: #e4e7eb;
        color: #43475c;
        font-weight: normal;
      }
    }

    .el-table__header,
    .el-table__body {
      tr {
        position: relative;

        td:nth-child(1),
        th:nth-child(1) {
          div {
            text-align: center;
          }
        }
      }
    }
  }
}

.popular-pag {
  margin-top: 45px;
  margin-bottom: 40px;
  text-align: center;
}
</style>
